<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>音频添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label='所属专辑'>
                        <template>
                            <el-select   v-model="form.aid" placeholder="请选择">
                                <el-option
                                    v-for="item in album"
                                    :label="item.aname"
                                    :value="item.aid">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="音频名">
                        <el-input type="text" rows="5" v-model="form.vname"></el-input>
                    </el-form-item>
                    <el-form-item label="vip">
                        <el-select v-model='form.statevip' placeholder='请选择'>
                            <el-option label='不是' value='1'>
                            </el-option>
                            <el-option label='是' value='2'>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <template>
                            <div>
                                <el-upload
                                    class="upload-demo"
                                    action="http://localhost:8090/voice/upload"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    :disabled='disabled'
                                    :data='data'
                                    :on-success='success'
                                    list-type="mp3"
                                    :headers='myHeaders'
                                    multiple
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                    :before-upload='beforeAvatarUpload'
                                    :file-list="fileList">
                                    <el-button size="small" type="primary" @click='infoAlbum'>上传音频</el-button>
                                    <div slot="tip" class="el-upload__tip">最大15MB</div>
                                </el-upload>
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'voiceadd',
    data() {
        return {
            fileList: [],
            form:{},
            album:[],
            //是否禁用文件上传
            disabled:true,
            //先上传音频然后提交的时候根据这个vid进行修改
            vid:undefined,
            //文件上传携带的参数
            data:{},
            myHeaders: {token: sessionStorage.getItem('token')}
        };
    }, created(){
        this.getData()
    }
    ,
    methods: {

        getData(){
            this.$http({
                method:'post',
                url:'album/selectAlbumAll'
            }).then((res)=>{
                this.album=res;
            })
        },
        //上传音频是判断是否选择了专辑
        infoAlbum(){
          if(this.form.aid!=undefined){
             this.disabled=false
              this.data={aid:this.form.aid}
          }else {
              this.$message.error('请选择专辑再进行上传')
          }
        },success(res,file,fileList){//音频上传成功的回调函数
            if(res!=0||res!='0'){
                console.log(this.form.aid)
                this.$message.success("上传成功")
                //返回的是添加的音频的主键
                this.vid=res
                console.log(this.vid)
            }else {
                this.$message.success('上传失败')
            }

        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },// 文件上传前 *上传文件限制--只能上传mp3格式的文件上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
        beforeAvatarUpload: function(file) {
            let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
            const extension = testmsg === 'mp3';
            if (!extension) {
                this.$message({
                    message: '上传文件只能是mp3格式！',
                    type: 'error'
                });
            }else {
                if (file.size / 1024 / 1024 / 15 >= 1) {
                    this.$message.error('上传文件大小超出限制')
                    return false;
                }
            }
            return extension;
        }
        ,//提交事件
        onSubmit() {
            if(this.form.aid==undefined||this.form.vname==undefined){
                this.$message.error('请选择专辑，并且章节名不能为空')
            }else if(this.vid==undefined){
                this.$message.error('请先上传音频再进行提交')
            }
            else {
                console.log(this.vid)
                this.$http({
                    method:'post',
                    url:'voice/voiceAdd',
                    params:{vid:this.vid,vname:this.form.vname,statevip:this.form.statevip}
                }).then((res)=>{
                    if(res!=false){
                        this.$message.success('提交成功')
                    }else {
                        this.$message.error('提交失败')
                    }
                })
            }


        }
    }
};
</script>